<template>
  <div>
    <Navbar :class="{'header':isHeader}">
      <span slot="left" class="iconfont icon-category icon"></span>
      <div slot="center" class="center">
        <span class="logo">G</span>
        <span class="iconfont icon-fangdajing fangdajing">
          家电返厂同价双11.11</span
        >
      </div>
      <div slot="right" class="right" @click="goto()">登录</div>
    </Navbar>
    <Slide :slide-list="slide"></Slide>
    <Category :category-list="categorys"></Category>
    <Floorlist :floor-list="floorlist" ></Floorlist>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import tabBar from "@/components/tabbar";
import Navbar from "@/components/navbar";
import Slide from "@/components/Slide";
import { getCategry, getFloorlist, getSliders } from "../../api";
import Category from "./category.vue"
import Floorlist from "./floorlist.vue"


export default {
  data() {
    return {
      slide: [],
      categorys:[],
      catename:[],
      floorlist:[],
      isHeader:false
    };
  },
  components: {
    tabBar,
    Navbar,
    Slide,
    Category,
    Floorlist,
  },
  created() {
     getSliders((res)=>{
      //  console.log(res);
      this.slide = res.data
    });

  getCategry((res) => {
    this.categorys =res.data
    // console.log(res);

    getFloorlist((res) =>{
      this.floorlist = res.data;
      console.log(this.floorlist);
    })

  });

  },


  mounted() {
   window.addEventListener('scroll',(e,distance)=>{
     this.pageScroll(100)
   })
  },
  methods: {
    pageScroll(val){
        let pageScrollDis= window.pageYOffset|| document.documentElement.scrollTop||document.body.scrollY
        pageScrollDis>val?this.isHeader=true : this.isHeader=false
    },
    goto() {
      this.$router.push('../login');
    }
  },
};
</script>

<style lang="scss" scoped>
.icon {
  font-size: 40px;
}

.center {
  line-height: 40px;
  background-color: white;
  border-radius: 25px;

  .logo {
    margin-top: 10px;
    display: inline-block;
    width: 30px;
    height: 20px;
    color: #f63515;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    line-height: 20px;
    border-right: solid 1px rgb(119, 111, 111);
  }

  .fangdajing {
    margin-left: 2px;
    display: inline-block;
    width: 190px;
    height: 20px;
    border-left: 1 solid black;
    font-size: 16px;
    color: rgb(119, 111, 111);
    margin-left: 7px;
    line-height: 20px;
  }
}
.right {
  font-size: 19px;
  // color: white;
}
.header{
  background-color: #f63515;
}
</style>
